<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <!-- <el-header style="height: 35px;"> -->
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        运营管理/运单/<span style="color: #0098FF;">提货单详情</span></span>
                <!-- </el-header> -->
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <div style="padding-left:20px;">
                    <div style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;">
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    状态:{{ tableData[0].bill_Status }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    客户:{{ tableData[0].customer }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    提货单号:{{ tableData[0].bill_number }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    运单号:{{ tableData[0].wb_number }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    订单号:{{ tableData[0].order_Id }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    始发地:{{ tableData[0].origin_place }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    目的地:{{ tableData[0].det_place }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    提货地址:{{ tableData[0].pickup_address }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    收货地址:{{ tableData[0].delivery_address }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    提货司机:{{ tableData[0].driver_name }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    车牌号:{{ tableData[0].car_number }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    手机号码:{{ tableData[0].driver_phone }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    提货开始时间:{{ tableData[0].pickup_time }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    提货完成时间:{{ tableData[0].pickup_endtime }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    计划发车时间:{{ tableData[0].plan_time }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    实际发车时间:{{ tableData[0].reality_time }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    计划到达时间:{{ tableData[0].planGet_time }}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    实际到达时间:{{ tableData[0].realityGet_time }}
                                </div>
                            </el-col>
                        </el-row>
                        <!-- <el-row :gutter="20" v-if="tableData.length > 0">
                            <el-col :span="12" style="background-color:#FFF4EB">
                                <div class="grid-content ep-bg-purple">
                                    <div style="width: 40px;height:40px;background-color: #FF9138;font-size: 25px;">
                                        <span style="color: #fff;">发</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6" style="background-color:#EBFBF2">
                                <div class="grid-content ep-bg-purple">
                                    <div style="width: 40px;height:40px;background-color: #2ED477;font-size: 25px;">
                                        <span style="color:#fff">收</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row> -->
                    </div>
                    <p style="padding-right: 1095px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;货物信息</p>
                    <div style="background-color: #F5F9FF;padding: 10px;border-radius: 10px;height: 200px;">
                        <el-table :data="tableData2">
                            <el-table-column type="index" label="序号" width="100" />
                            <el-table-column property="cg_name" label="货物名称" />
                            <el-table-column property="cg_num" label="总数量">
                                <template #default="scope">
                                    {{ scope.row.cg_num }}箱
                                </template>
                            </el-table-column>
                            <el-table-column property="cg_volume" label="体积(m³)" />
                            <el-table-column property="cg_weight" label="重量(kg)" />
                            <el-table-column property="freight_costs" label="分摊运费(元)" />
                            <el-table-column property="handling_fee" label="装卸费(元)" />
                            <el-table-column property="packag_fee" label="包装费(元)" />
                            <el-table-column property="cg_num" label="提货数量" />
                            <el-table-column property="cg_volume" label="提货体积(m³)" />
                            <el-table-column property="cg_weight" label="提货重量(kg)" />
                            <el-table-column property="freight_costs" label="提货分摊运费(元)" />
                            <el-table-column property="handling_fee" label="提货装卸费(元)" />
                            <el-table-column property="packag_fee" label="提货包装费(元)" />
                        </el-table>
                        <p v-if="tableData2.length > 0">
                            <span style="float: left;padding-top: 50px;">合计</span>
                            <span style="float: right;padding-top: 50px;">总数量:{{ tableData2[0].cg_total }}箱
                                &nbsp;&nbsp;总体积:{{ tableData2[0].cg_totalvolume
                                }}m³&nbsp;&nbsp;总质量:{{ tableData2[0].cg_totalweight }}kg</span>
                        </p>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-button plain @click="FH">返回</el-button>
                        <el-button type="primary">去调度</el-button>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from "vue-router";
export default {
    setup() {
        let router = useRoute();   //获取页面跳转时存储的值
        let router2 = useRouter();   //页面跳转
        let tableData = ref([]);   //基础资料的详情
        let tableData2 = ref([]);   //货物类型的详情
       
        
        // function XQ(id) {
        //     router.push({ path: '/XQ', query: { id } })
        // }

        let id = ref();

        onMounted(() => {
            id.value = router.query.uid;
            Show();
            Show2();
        })
        function Show() {   //基础资料数据
            axios.get('http://localhost:5261/api/Bill_ol/GetBill_XQ?Billol_Id=' + id.value).then((res) => {
                tableData.value = res.data;
                console.log(tableData.value);
                tableData.value[0].pickup_time = new Date(tableData.value[0].pickup_time).toISOString().replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ');
                tableData.value[0].pickup_endtime = new Date(tableData.value[0].pickup_endtime).toISOString().replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ');
                tableData.value[0].plan_time = new Date(tableData.value[0].plan_time).toISOString().replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ');
                tableData.value[0].reality_time = new Date(tableData.value[0].reality_time).toISOString().replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ');
                tableData.value[0].planGet_time = new Date(tableData.value[0].planGet_time).toISOString().replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ');
                tableData.value[0].realityGet_time = new Date(tableData.value[0].realityGet_time).toISOString().replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' '); 
                switch (tableData.value[0].ord_state) {
                    case 1:
                        tableData.value[0].ord_state = '待接单';
                        break;
                    case 2:
                        tableData.value[0].ord_state = '待提货';
                        break;
                    case 3:
                        tableData.value[0].ord_state = '待发车';
                        break;
                    case 4:
                        tableData.value[0].ord_state = '运输中';
                        break;
                    case 5:
                        tableData.value[0].ord_state = '待签收';
                        break;
                    case 6:
                        tableData.value[0].ord_state = '已完成';
                        break;
                    case 7:
                        tableData.value[0].ord_state = '已取消';
                        break;
                    case 8:
                        tableData.value[0].ord_state = '已拒绝';
                        break;
                };
                switch (tableData.value[0].cg_type) {
                    case 0:
                        tableData.value[0].cg_type = '日用品';
                        break;
                    case 1:
                        tableData.value[0].cg_type = '食品';
                        break;
                    case 2:
                        tableData.value[0].cg_type = '文件';
                        break;
                    case 3:
                        tableData.value[0].cg_type = '家具';
                        break;
                };
                switch (tableData.value[0].dis_mode) {
                    case 0:
                        tableData.value[0].dis_mode = '送货上门';
                        break;
                    case 1:
                        tableData.value[0].dis_mode = '驿站代取';
                        break;
                    case 2:
                        tableData.value[0].dis_mode = '蜂巢寄存';
                        break;
                };
                switch (tableData.value[0].vc_model) {
                    case 0:
                        tableData.value[0].vc_model = '微面';
                        break;
                    case 1:
                        tableData.value[0].vc_model = '小面';
                        break;
                    case 2:
                        tableData.value[0].vc_model = '中面';
                        break;
                    case 3:
                        tableData.value[0].vc_model = '长途打车';
                        break;
                    case 4:
                        tableData.value[0].vc_model = '冷藏车';
                        break;
                };
                switch (tableData.value[0].vc_length) {
                    case 0:
                        tableData.value[0].vc_length = '4米2';
                        break;
                    case 1:
                        tableData.value[0].vc_length = '5米2';
                        break;
                    case 2:
                        tableData.value[0].vc_length = '6米8';
                        break;
                    case 3:
                        tableData.value[0].vc_length = '7米6';
                        break;
                    case 4:
                        tableData.value[0].vc_length = '9米6';
                        break;
                    case 5:
                        tableData.value[0].vc_length = '13米';
                        break;
                };
                switch (tableData.value[0].bill_method) {
                    case 0:
                        tableData.value[0].bill_method = '按车计费';
                        break;
                    case 1:
                        tableData.value[0].bill_method = '按重量计费';
                        break;
                    case 2:
                        tableData.value[0].bill_method = '按体积计费';
                        break;
                };
            }).catch((err) => {
                console.log("错误" + err);
            })
        }

        function Show2() {   //货物信息数据
            axios.get("http://localhost:5261/api/Bill_ol/GetBill_Order?Ord_number="+id.value).then((res) => {
                tableData2.value = res.data;
                console.log(tableData2.value);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function FH() {
            router2.push("/Bill_ol");
        }

        return {
            tableData,
            id,
            tableData2,
            FH
            
        }
    }
}
</script>

<style scoped>
.common-layout {
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    background-color: #D3DCE6;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
}

.title {
    padding-right: 1000px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;

}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    /* background-color: aqua; */
    /* 设置垂直对齐 */
    display: flex;
    align-items: center;
}

.grid-content {
    border-radius: 4px;
    min-height: 20px;
    max-width: 300px;
    /* 设置宽度，确保省略号显示正确 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出文本 */
    /* padding-right: 500px; */
}

.button {
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>